<template>
  <div class="app-container">
    <div class="pageContent bgFF">
      <div class="titleBox pageFlex pageAlignCenter">
        <div class="line"></div>
        <div class="title">{{goodInfo.name}}</div>
      </div>
      <el-descriptions
          direction="vertical"
          border
          style="margin-top: 20px;"
          :column="4"
      >
        <el-descriptions-item
            :rowspan="3"
            :width="200"
            label="商品图片"
            align="center"
        >
          <el-image style="width: 100px; height: 100px" :src="goodInfo.cover" :preview-src-list="[goodInfo.cover]"/>
        </el-descriptions-item>
        <el-descriptions-item label="ID" width="400">{{ goodInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="编码" width="400">{{ goodInfo.goodsNo }}</el-descriptions-item>
        <el-descriptions-item label="条码" width="400">{{ goodInfo.barCode }}</el-descriptions-item>
        <el-descriptions-item label="库存数量" width="400">{{ goodInfo.stock }}</el-descriptions-item>
        <el-descriptions-item label="价格" width="400">￥{{ goodInfo.price }}</el-descriptions-item>
        <el-descriptions-item label="成本价格" width="400">￥{{ goodInfo.costPrice }}</el-descriptions-item>
        <el-descriptions-item label="关键字" width="400">{{goodInfo.keywords || '暂无'}}</el-descriptions-item>
        <el-descriptions-item label="规格" width="400">{{ goodInfo.spec || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="单位" width="400">{{ goodInfo.unit || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" width="400">{{ setTimeFormat(goodInfo.createTime) || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="类别" width="400">{{ goodInfo.typeName || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="供应商" width="400">{{ goodInfo.manufacturerName || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="品牌" width="400">{{ goodInfo.brandName || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="仓库ID" width="400">{{ goodInfo.warehouseId || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="货架ID" width="400">{{ goodInfo.shelfId || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="货位编号" width="400">{{ goodInfo.locationNo || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="贮藏条件" :span="8">{{ goodInfo.storageCondition || '暂无' }}</el-descriptions-item>
        <el-descriptions-item label="商品细节介绍" :span="4">
          <div class="descriptionsContent">
            <div v-html="goodInfo.content" v-if="goodInfo.content"></div>
            <div v-else>暂无</div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="dataManageBottom pageFlex pageFlexCenter">
        <el-button type="primary" @click="toBack">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted} from 'vue';
import { useRoute } from 'vue-router';
import { ElLoading } from 'element-plus';
import { searchGoodByIdApi } from '@/api/gasManage/stockManage/goodInfo';
import { searchCategoryByIdApi } from '@/api/gasManage/stockManage/goodCategory';
import { searchBrandByIdApi } from '@/api/gasManage/stockManage/goodBrand';
import { searchManufacturerByIdApi } from '@/api/gasManage/defaultSetting/companyInfo';
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const route = useRoute();
const { proxy } = getCurrentInstance();
const goodInfo = ref({
  cover: '',
  name: '',
  id: '',
  goodsNo: '',
  goodsBarCode: '',
  price: '',
  costPrice: '',
  manufacturerId: '',
  manufacturerName: '',
  type: '',
  typeName: '',
  brandId: '',
  brandName: '',
  warehouseId: '',
  shelfId: '',
  locationNo: '',
  stock: '',
  spec: '',
  unit: '',
  storageCondition: '',
  content: ''
})
const setTimeFormat = computed(() => {
  return time => {
    if(time){
      let date = new Date(time);
      return date.toLocaleString()
    }
    return ''
  }
})
async function initData(){
  const loading = ElLoading.service({
    lock: true,
    text: '加载中~',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let result = await getGoodInfoApi(route.params.id);
  if(!result){
    loading.close();
    setTimeout(()=>{
      toBack();
    }, 500)
    return false
  }
  result.cover = setCoverUrl(result.cover);
  result.type = Number(result.type);
  result.brandId = Number(result.brandId);
  goodInfo.value = result;
  if(goodInfo.value.manufacturerId && goodInfo.value.manufacturerId !== '0'){
    let res = await getCompanyInfoApi(goodInfo.value.manufacturerId);
    if(!res){
      loading.close();
      toBack();
      return false
    }
    goodInfo.value.manufacturerName = res.companyName;
  }
  if(goodInfo.value.type){
    let res = await getTypeApi(goodInfo.value.type);
    if(!res){
      loading.close();
      setTimeout(()=>{
        toBack();
      }, 500)
      return false
    }
    goodInfo.value.typeName = res.name;
  }
  if(goodInfo.value.brandId){
    let res = await getBrandApi(goodInfo.value.brandId);
    if(!res){
      loading.close();
      setTimeout(()=>{
        toBack();
      }, 500)
      return false
    }
    goodInfo.value.brandName = res.name;
  }
  loading.close();
  if(!goodInfo.value.cover){
    ElMessageBox.confirm(
      '检测到您的商品数据未填写完整，请先完成商品信息修改！',
      '提示',
      {
        type: 'danger',
        showCancelButton: false
      }
    ).then(()=>{
      toBack();
    })
  }
}
function setCoverUrl(url){
  if(url){
    return baseUrl+url
  }
  return ''
}
function toBack(){
  const obj = { path: "/gasManage/stockManage/goodInfo" };
  proxy.$tab.closeOpenPage(obj);
}
function getGoodInfoApi(id){
  return new Promise((resolve, reject) => {
    searchGoodByIdApi(id).then(res => {
      resolve(res.data);
    }).catch(() => {
      resolve(false)
    })
  })
}
function getCompanyInfoApi(id){
  return new Promise((resolve, reject) => {
    searchManufacturerByIdApi(id).then(res => {
      resolve(res.data);
    }).catch(() => {
      resolve(false)
    })
  })
}
function getTypeApi(id){
  return new Promise((resolve, reject) => {
    searchCategoryByIdApi(id).then(res => {
      resolve(res.data);
    }).catch(() => {
      resolve(false)
    })
  })
}
function getBrandApi(id){
  return new Promise((resolve, reject) => {
    searchBrandByIdApi(id).then(res => {
      resolve(res.data);
    }).catch(() => {
      resolve(false)
    })
  })
}
onMounted(() => {
  initData()
})
</script>
<style scoped lang="scss">
@import "@/assets/styles/public.scss";
.app-container{
  width: 100%;
  background: $formBgset4;
  min-height: calc(100vh - $navBarHeight);
  .pageContent {
    width: 100%;
    min-width: 1200px;
    min-height: $pageMinHeight;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 20px;
  }
  .titleBox{
    width: 100%;
    height: 44px;
    background: $formBgset3;
    padding-left: 8px;
    box-sizing: border-box;
    .line{
      width: 4px;
      height: 16px;
      background: $formBgset2;
      margin-right: 8px;
    }
    .title{
      height: 16px;
      line-height: 16px;
      font-weight: 500;
      font-size: 16px;
      color: #1D2129;
    }
  }
  .dataManageBottom{
    width: 100%;
    height: 72px;
  }
  .descriptionsContent{
    width: 750px;
    :deep(p){
      width: 750px;
    }
    :deep(img){
      width: 750px;
    }
  }
}
</style>